<template>
  <div class="tab-bar">
    <div class="tab-item" @click="router.push('/home')">
      <van-icon :name="route.path === '/home' ? 'wap-home' : 'wap-home-o'" />
      <span>首页</span>
    </div>
    <div class="tab-item" @click="router.push('/business-list')">
      <van-icon :name="route.path === '/business-list' ? 'search' : 'search'" />
      <span>发现</span>
    </div>
    <div class="tab-item" @click="router.push('/order')">
      <van-icon :name="route.path === '/order' ? 'orders' : 'orders-o'" />
      <span>订单</span>
    </div>
    <div class="tab-item" @click="router.push('/user')">
      <van-icon :name="route.path === '/user' ? 'manager' : 'manager-o'" />
      <span>我的</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-size: 12px;
}

.tab-item .van-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.tab-item.active {
  color: #0097ff;
}

.tab-item span {
  margin-top: 2px;
}
</style> 